<template>
  <div class="all">
    <div class="login-all">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="text-box1">WELCOME！team-TEAM</div>
      <div class="text-box2">为你的工作效率锦上添花</div>

      <!--      <form class="form-box">-->
      <!--        <el-form :model="loginForm" status-icon :rules="loginFormRules" ref="loginForm">-->
      <!--          <el-form-item prop="nameOrEmail">-->
      <!--            <el-input-->
      <!--              placeholder="请输入用户名或者邮箱"-->
      <!--              v-model="loginForm.nameOrEmail"-->
      <!--              autocomplete="off"-->
      <!--              @keyup.enter.native="login('loginForm')"></el-input>-->
      <!--            <i class="el-icon-user"></i>-->

      <!--          </el-form-item>-->
      <!--          <el-form-item prop="password">-->
      <!--            <i class="el-icon-lock"></i>-->
      <!--              <el-input-->
      <!--                placeholder="请输入密码"-->
      <!--                v-model="loginForm.password"-->
      <!--                autocomplete="off"-->
      <!--                type="password"-->
      <!--                @keyup.enter.native="login('loginForm')"></el-input>-->

      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <el-checkbox v-model="checked" class="remember" @click="remember">记住密码</el-checkbox>-->
      <!--        <div class="forget" @click="forget">忘记密码？</div>-->
      <!--        <button type="submit" @click="login('loginForm')" class="button">登录</button>-->
      <!--        <div class="returnHome" @click="returnHome">返回首页</div>-->
      <!--        <div class="goRegister" @click="goRegister">没有账号？去注册</div>-->
      <!--      </form>-->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="form-box">
        <!--用户名-->
        <el-form-item prop="nameOrEmail" class="username-item">
          <el-input
            v-model="loginForm.nameOrEmail"
            placeholder="邮箱/用户名"
            class="username">
          </el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password" class="password-item">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
            class="password">
          </el-input>
        </el-form-item>
        <el-checkbox v-model="checked" class="remember" @click="remember">记住密码</el-checkbox>
        <div class="forget" @click="forget">忘记密码？</div>
        <button type="button" @click="click_login" class="button">登录</button>
        <div class="returnHome" @click="returnHome">返回首页</div>
        <div class="goRegister" @click="goRegister">没有账号？去注册</div>
        <i class="el-icon-user"></i>
        <i class="el-icon-lock"></i>
      </el-form>
      <img src="./assets/login/img2.png">
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    var checkAccount = (rule, value, callback) => {
      if (!value  || value === '') {
        callback(new Error('请输入用户名或邮箱'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value || value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      //登陆表单绑定的数据
      loginForm:{
        nameOrEmail:"",
        password:""
      },
      //输入的规则
      loginFormRules:{
        //用户名规则
        nameOrEmail: [
          { validator: checkAccount, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
      },
      checked: false
    }
  },
  methods: {
    remember() {
      console.log(this.checked);
    },

    forget() {

    },

    click_login: function () {
      const self = this;
      const formData = new FormData();
      formData.append("nameOrEmail", self.loginForm.nameOrEmail);
      formData.append("password", self.loginForm.password);
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          self.$axios({
            method: 'post',
            url: '/user/login',
            data: formData,
          })
            .then(res => {
              console.log(res);
              if(res.data.errno===0) {
                this.$store.state.isLogin=true;
                this.$store.state.ID=res.data.userID;
                this.$message.success('登录成功！');
                //是师傅就跳转师傅主页面，是用户就跳转用户主界面
                setTimeout(() => {
                  this.$router.push('/program/show');
                }, 1000);
              }
              else{
                this.$message.error(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            })
        } else {
          console.log('提交失败!!');
          return false;
        }
      });
    },
    // click_login() {
    //   this.$refs.loginFormRef.validate( async valid =>{
    //     if(!valid)
    //       return;
    //     const { data: res }= await this.$axios.post("user/login",
    //       {"nameOrEmail": this.loginForm.nameOrEmail, "password": this.loginForm.password});
    //     console.log(res);
    //     if(res.result!==1)
    //       return this.$message.error(res.msg);
    //     this.$message.success("登陆成功");
    //     window.sessionStorage.setItem("token",res.token);
    //
    //     return await this.$router.push("/program/show")
    //   })
    // },

    returnHome() {
      this.$router.push('/program/show');
    },

    goRegister() {
      this.$router.push('/user/register');
    }
  }
}
</script>

<style scoped>
.all {
  position: relative;
  /*width: 1585px;*/
  /*height: 989px;*/
  width: 100%;
  height: 100vh;
  background: url("./assets/login/new.png") center center no-repeat;
  background-size: 100% 100%;
}

.login-all {
  position: absolute;
  /*left: 96px;*/
  /*top: 85px;*/
  left: 152px;
  top: 85px;

  /*width: 1378px;*/
  /*height: 794px;*/
  width: 1140px;
  height: 624px;

  border: 1px solid #BBBBBB;
  background-color: #fff;
}

.box1 {
  position: absolute;
  /*width: 228px;*/
  /*height: 76px;*/
  width: 182px;
  height: 61px;
  background-color: #6D7190;
  border: 1px solid #BBBBBB;
}

.box2 {
  position: absolute;
  /*left: 228px;*/
  /*width: 117px;*/
  /*height: 42px;*/
  left: 183px;
  width: 94px;
  height: 34px;
  background-color: rgba(145, 171, 201, 0.36);
  border: 1px solid #BBBBBB;
}

.text-box1 {
  position: absolute;
  /*left: 109px;*/
  /*top: 145px;*/
  left: 120px;
  top: 105px;
  /*font-size: 36px;*/
  font-size: 29px;
  font-weight: bold;
  /*font-family: 思源黑体;*/
  color: #101010;
  /*line-height: 53px;*/
  line-height: 42px;
}

.text-box2 {
  position: absolute;
  /*left: 109px;*/
  /*top: 212px;*/
  left: 120px;
  top: 153px;
  /*font-size: 20px;*/
  font-size: 16px;
  font-weight: bold;
  color: #717070;
  /*line-height: 30px;*/
  line-height: 24px;
}

.form-box {
  position: absolute;
  /*left: 109px;*/
  /*top: 300px;*/
  left: 123px;
  top: 217px;

  width: 353px;
  height: 310px;
  /*background-color: #42b983;*/

  /*font-size: 35px;*/
  font-size: 24px;
  color: rgba(113, 112, 112, 0.83);
}

.username-item {
  position: absolute;
  width: 353px;
  height: 64px;
}

.username-item /deep/ .el-form-item__content,
.password-item /deep/ .el-form-item__content{
  height: 64px;
  margin-left: 24px;
}

.password-item {
  position: absolute;
  left: 0;
  top: 80px;
  width: 353px;
  height: 64px;
}

.form-box .username /deep/ .el-input__inner{
  position: absolute;
  left: 0;
  /*top: 0;*/
  top: -25px;

  /*width: 439px;*/
  /*height: 79px;*/
  width: 351px;
  height: 64px;

  border-radius: 40px;
  border: 1px solid #BBBBBB;

  text-align: left;
  /*text-indent: 80px;*/
  /*font-size: 20px;*/
  /*text-indent: 64px;*/
  text-indent: 40px;
  font-size: 16px;
  color: rgba(79, 88, 107, 0.62);

  outline: none;
}

.form-box .password  /deep/ .el-input__inner{
  position: absolute;
  left: 0;
  /*top: 100px;*/
  /*top: 80px;*/
  top: -25px;

  /*width: 439px;*/
  /*height: 79px;*/
  width: 351px;
  height: 64px;
  border-radius: 40px;  /* 边框四个角的弧度  */
  border: 1px solid #BBBBBB;  /* 边框厚度和颜色  */

  text-align: left;
  /*text-indent: 80px;
  font-size: 20px;*/
  /*text-indent: 64px;*/
  text-indent: 40px;
  font-size: 16px;
  color: rgba(79, 88, 107, 0.62);

  outline: none;
}

input[type="password"]::-ms-reveal {
  display: none;
}

/*.form-box .username {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  top: 0;*/

/*  !*width: 439px;*!*/
/*  !*height: 79px;*!*/
/*  width: 350px;*/
/*  height: 60px;*/

/*  border-radius: 40px;*/
/*  border: 1px solid #BBBBBB;*/

/*  text-align: left;*/
/*  !*text-indent: 80px;*!*/
/*  !*font-size: 20px;*!*/
/*  text-indent: 64px;*/
/*  font-size: 16px;*/
/*  color: rgba(79, 88, 107, 0.62);*/

/*  outline: none;*/
/*}*/

/*.form-box .password {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  !*top: 100px;*!*/
/*  top: 80px;*/

/*  !*width: 439px;*!*/
/*  !*height: 79px;*!*/
/*  width: 350px;*/
/*  height: 60px;*/
/*  border-radius: 40px;  !* 边框四个角的弧度  *!*/
/*  border: 1px solid #BBBBBB;  !* 边框厚度和颜色  *!*/

/*  text-align: left;*/
/*  !*text-indent: 80px;*/
/*  font-size: 20px;*!*/
/*  text-indent: 64px;*/
/*  font-size: 16px;*/
/*  color: rgba(79, 88, 107, 0.62);*/

/*  outline: none;*/
/*}*/

.remember {
  position: absolute;
  /*left: 9px;*/
  /*top: 210px;*/
  left: 8px;
  top: 162px;
}

.forget {
  position: absolute;
  /*left: 350px;*/
  /*top: 210px;*/
  left: 280px;
  top: 162px;

  font-size: 14px;
  color: rgba(16, 16, 16, 0.78);
  cursor: pointer;
}

.forget:hover {
  color: #138AFF;
}

.form-box .el-icon-user {
  position: absolute;
  /*left: 30px;*/
  /*top: 22px;*/
  left: 25px;
  top: 20px;
}

.form-box .el-icon-lock {
  position: absolute;
  /*left: 30px;*/
  /*top: 122px;*/
  left: 25px;
  top: 100px;
}

.form-box .button {
  position: absolute;
  left: 0;
  /*top: 283px;*/
  top: 210px;

  /*width: 439px;*/
  /*height: 79px;*/
  width: 350px;
  height: 60px;
  background-color: #DDE2F1;
  border-radius: 40px;
  border: 1px solid #BBBBBB;

  /*font-size: 25px;*/
  font-size: 20px;
  color: rgba(79, 88, 107, 0.62);

  outline: none;
  cursor: pointer;
}

.returnHome {
  position: absolute;
  /*left: 39px;*/
  /*top: 393px;*/
  left: 31px;
  top: 300px;

  font-size: 14px;
  color: rgba(16, 16, 16, 0.78);
  cursor: pointer;
}

.returnHome:hover {
  color: #138AFF;
}

.goRegister {
  position: absolute;
  /*left: 300px;*/
  /*top: 393px;*/
  left: 230px;
  top: 300px;

  font-size: 14px;
  color: rgba(16, 16, 16, 0.82);
  cursor: pointer;
}

.goRegister:hover {
  color: #138AFF;
}

img {
  position: absolute;
  /*left: 412px;*/
  /*top: 42px;*/
  /*left: 622px;*/
  /*top: 102px;*/
  left: 560px;
  top: 74px;

  /*width: 1148px;*/
  /*height: 646px;*/
  /*width: 700px;*/
  /*height: 560px;*/
  width: 570px;
  height: 463px;
}

.circle1 {
  position: absolute;
  /*left: 610px;*/
  /*top: 44px;*/

  /*width: 39px;*/
  /*height: 39px;*/
  left: 580px;
  top: 40px;

  width: 32px;
  height: 32px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(223, 172, 129, 0.46);
}

.circle2 {
  position: absolute;
  /*left: 63px;*/
  /*top: 730px;*/

  /*width: 64px;*/
  /*height: 64px;*/
  left: 125px;
  top: 580px;

  width: 52px;
  height: 52px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(103, 146, 198, 0.62);
}

.circle3 {
  position: absolute;
  /*left: 123px;*/
  /*top: 862px;*/

  /*width: 40px;*/
  /*height: 40px;*/
  left: 190px;
  top: 690px;

  width: 32px;
  height: 32px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(79, 88, 107, 0.62);
}

.circle4 {
  position: absolute;
  /*left: 412px;*/
  /*top: 833px;*/

  /*width: 94px;*/
  /*height: 94px;*/
  left: 450px;
  top: 675px;

  width: 75px;
  height: 75px;
  border: 1px solid #BBBBBB;
  border-radius: 50%;
  background-color: rgba(249, 239, 230, 0.34);
}
</style>
